import { Component, OnInit } from '@angular/core';
import { ProjectService } from 'src/app/core/service/project.service';
import { ApplicationService } from 'src/app/core/service/application.service';

@Component({
  selector: 'app-project-dashboard',
  templateUrl: './project-dashboard.component.html',
  styleUrls: ['./project-dashboard.component.scss']
})
export class ProjectDashboardComponent implements OnInit {
  unauthorizedDataSet: any;

  highRiskDatas: any;

  grade = [];
  projectOverviewData = [];

  appOverviewName = [];
  appOverviewSeriousNum = [];
  appOverviewHighNum = [];
  appOverviewMediumNum = [];
  appOverviewLowNum = [];

  // cve 分值
  cveName = [];
  cveValue = [];

  // 许可使用情况
  permissionName = [];
  permissionDatas = [];

  appOverview = {
    color: ['#A93A40', '#F56D71', '#FFCD5C', '#258CF5'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'          // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      // orient: '',
      x: 'left',
      data: ['严重', '高', '中', '低'],
      left: '20',
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: this.appOverviewName,
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      type: 'value'
    },
    series: [
      {
        name: '严重',
        type: 'bar',
        barWidth: '40%',
        stack: '总量',

        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        data: this.appOverviewSeriousNum
      },
      {
        name: '高',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        data: this.appOverviewHighNum
      },
      {
        name: '中',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        data: this.appOverviewMediumNum
      },
      {
        name: '低',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        data: this.appOverviewLowNum
      }
    ]
  };

  // 项目概况
  projectOverview = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      data: this.grade,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '项目概况',
        type: 'pie',
        radius: ['50%', '70%'],
        color: ['#A93A40', '#F56D71', '#FFCD5C', '#258CF5'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center',
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold',
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: this.projectOverviewData
      }
    ]
  };

  cveCount = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      formatter: '数量: {c}  <br/> {a}: {b}',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'          // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: this.cveName,
        axisTick: {
          alignWithLabel: true
        },
        nameTextStyle: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      }
    ],
    series: [
      {
        name: 'CVE分值',
        type: 'bar',
        barWidth: '60%',
        data: this.cveValue
      }
    ]
  };

  permission = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: this.permissionName,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '许可使用情况',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: this.permissionDatas,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  constructor(
    private projectService: ProjectService,
    private applicationService: ApplicationService
  ) { }

  getProjectOverview() {
    this.projectService.getProjectOverview()
      .subscribe((projectData) => {
        // tslint:disable-next-line: forin
        for (const key in projectData) {
          this.grade.push(projectData[key].gradeName);
          const projectOverviewDataItem = { value: 0, name: '' };

          projectOverviewDataItem.value = projectData[key].number;
          projectOverviewDataItem.name = projectData[key].gradeName;

          this.projectOverviewData.push(projectOverviewDataItem);
        }
        console.log('=== janine.getProjectOverview().projectOverviewData ===>', this.projectOverviewData);
        // this.projectOverview = JSON.parse(JSON.stringify(this.projectOverview));
        this.projectOverview = Object.assign({}, this.projectOverview);
      });
  }

  getApplicationview() {
    this.applicationService.getApplicationOverview()
      .subscribe((appData) => {
        console.log('=== janine.getApplicationview().appData ===>', appData);
        if (appData.status === 1) {
          // tslint:disable-next-line: forin
          for (const key in appData.data) {
            this.appOverviewName.push(appData.data[key].appName);

            this.appOverviewSeriousNum.push(appData.data[key].seriousNum);
            this.appOverviewHighNum.push(appData.data[key].highNum);
            this.appOverviewMediumNum.push(appData.data[key].mediumNum);
            this.appOverviewLowNum.push(appData.data[key].lowNum);
          }
          this.appOverview = Object.assign({}, this.appOverview);
        }
      });
  }

  getCveCount() {
    this.projectService.getCveCount()
      .subscribe((cveData) => {
        console.log('=== janine.getCveCount().cveData ===>', cveData);
        if (cveData.status === 1) {
          // tslint:disable-next-line: forin
          for (const key in cveData.data) {
            this.cveName.push(cveData.data[key].name);
            this.cveValue.push(cveData.data[key].value);
          }
          this.cveCount = Object.assign({}, this.cveCount);
        }
      });
  }


  getPermission() {
    this.projectService.getPermission()
      .subscribe((permissionData) => {
        console.log('=== janine.getPermission().permissionData ===>', permissionData);
        if (permissionData.status === 1) {
          // tslint:disable-next-line: forin
          for (const key in permissionData.data) {
            this.permissionName.push(permissionData.data[key].name);
            const permissionDataItem = { value: 0, name: '' };
            permissionDataItem.value = permissionData.data[key].value;
            permissionDataItem.name = permissionData.data[key].name;
            this.permissionDatas.push(permissionDataItem);
          }
          this.permission = Object.assign({}, this.permission);
          console.log('=== Janine.getPermission().permissionDatas ===>', this.permissionDatas);
        }
      });
  }

  /**
   * 高危TOP10
   * @param reset 获取数据
   */
  getHighRisk(): void {
    this.projectService.getHighRisk().subscribe((highRiskData) => {
      if (highRiskData.status === 1) {
        this.highRiskDatas = highRiskData.data;
      }
    });
  }

  /**
   * 未授权软件列表
   * @param reset 获取数据
   */
  getUnauthorizedPage(): void {
    this.projectService.getUnauthorizedPage().subscribe((unauthorizedPage) => {
      if (unauthorizedPage.status === 1) {
        this.unauthorizedDataSet = unauthorizedPage.data;
      }
    });
  }

  ngOnInit() {
    this.getProjectOverview();
    this.getApplicationview();
    this.getCveCount();
    this.getPermission();
    this.getHighRisk();
    this.getUnauthorizedPage();
  }

}
